<template>
    <div class="gamePage">
        <!-- 游戏排名 -->
        <div v-for="(item,index) in list" :key="index" class="game-rank">
            <div class="game-rank-img">
                <span class="game-rank-num" :class="[`top${index+1}`]"></span>
                <span class="game-rank-like"></span>
                <img :src="item.game_cover" alt="">
                <p class="game-rank-title">
                    <span>{{ item.game_name }}</span>
                    <span class="tag"> <i style="color:#f25702;">-</i> {{ item.topic_count }} </span>
                </p>
            </div>
            <p class="game-rank-desc">
                {{ item.topic_content }}
            </p>
        </div>

        <!--        <div class="game-rank">-->
        <!--            <div class="game-rank-img">-->
        <!--                <span class="game-rank-num top2"></span>-->
        <!--                <span class="game-rank-like liked"></span>-->
        <!--                <img src="@/assets/620@2x.webp" alt="">-->
        <!--                <p class="game-rank-title">-->
        <!--                    <span>LUST GODDESS</span>-->
        <!--                    <span class="tag"> <i style="color:#f25702;">-</i> 45万</span>-->
        <!--                </p>-->
        <!--            </div>-->
        <!--            <p class="game-rank-desc">-->
        <!--                图多慎入!花费我众多子孙弟兵终于搜集全图册给大家分享-->
        <!--            </p>-->
        <!--        </div>-->

        <!--        <div class="game-rank">-->
        <!--            <div class="game-rank-img">-->
        <!--                <span class="game-rank-num top3"></span>-->
        <!--                <span class="game-rank-like"></span>-->
        <!--                <img src="@/assets/620@2x.webp" alt="">-->
        <!--                <p class="game-rank-title">-->
        <!--                    <span>AEONS ECHO</span>-->
        <!--                    <span class="tag"> <i style="color:#f25702;">-</i> 35万</span>-->
        <!--                </p>-->
        <!--            </div>-->
        <!--            <p class="game-rank-desc">-->
        <!--                图多慎入!花费我众多子孙弟兵终于搜集全图册给大家分享-->
        <!--            </p>-->
        <!--        </div>-->

        <!--        <div class="game-rank">-->
        <!--            <div class="game-rank-img">-->
        <!--                <span class="game-rank-num top4"></span>-->
        <!--                <span class="game-rank-like liked"></span>-->
        <!--                <img src="@/assets/657@2x.webp" alt="">-->
        <!--                <p class="game-rank-title">-->
        <!--                    <span>PROJECT QT</span>-->
        <!--                    <span class="tag"> <i style="color:#f25702;">-</i> 20万</span>-->
        <!--                </p>-->
        <!--            </div>-->
        <!--            <p class="game-rank-desc">-->
        <!--                不知道是不是只有我才有遇到这个BUG，请大家帮忙-->
        <!--            </p>-->
        <!--        </div>-->

        <!--        <div class="game-rank">-->
        <!--            <div class="game-rank-img">-->
        <!--                <span class="game-rank-num top5"></span>-->
        <!--                <span class="game-rank-like"></span>-->
        <!--                <img src="@/assets/657@2x.webp" alt="">-->
        <!--                <p class="game-rank-title">-->
        <!--                    <span>PROJECT QT</span>-->
        <!--                    <span class="tag"> <i style="color:#f25702;">-</i> 20万</span>-->
        <!--                </p>-->
        <!--            </div>-->
        <!--            <p class="game-rank-desc">-->
        <!--                不知道是不是只有我才有遇到这个BUG，请大家帮忙-->
        <!--            </p>-->
        <!--        </div>-->

        <!--        <div class="game-rank">-->
        <!--            <div class="game-rank-img">-->
        <!--                <span class="game-rank-num top6"></span>-->
        <!--                <span class="game-rank-like liked"></span>-->
        <!--                <img src="@/assets/657@2x.webp" alt="">-->
        <!--                <p class="game-rank-title">-->
        <!--                    <span>PROJECT QT</span>-->
        <!--                    <span class="tag"> <i style="color:#f25702;">-</i> 20万</span>-->
        <!--                </p>-->
        <!--            </div>-->
        <!--            <p class="game-rank-desc">-->
        <!--                不知道是不是只有我才有遇到这个BUG，请大家帮忙-->
        <!--            </p>-->
        <!--        </div>-->

        <div style="display: flex;justify-content: center;height: 40px;">
            <nut-pagination v-model="page" :total-items="125" :show-page-size="3" force-ellipses></nut-pagination>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {axiosService} from '@http'
export interface gameZoneTopicInterface {
    items: GameZoneTopicItemInterface[]
    total_items: number
    limit: number
    first: number
    previous: number
    current: number
    next: number
    last: number
}

export interface GameZoneTopicItemInterface {
    game_id: number
    game_name: string
    game_cover: string
    topic_id: number
    topic_content: string
    topic_count: number
    topic_time: string
}


const page = ref(1)
const list = ref<GameZoneTopicItemInterface[]>([])

const getList = async () => {
    const data = {
        page: page.value //分也
    }
    const res = await axiosService.post<gameZoneTopicInterface>('/api/Topic/gameZoneTopic', data)
    if (res.code === 200 && res.data){
        list.value = res.data.items
    }
}
getList()


</script>

<style scoped lang="scss">

.gamePage {
    padding: 0 15px;
    color: #fff;

    .game-rank {
        width: 100%;
        margin-bottom: 15px;

        .game-rank-img {
            position: relative;
            img {
                width: 100%;
            }
            .game-rank-num{
                display: inline-block;
                position: absolute;
                left: 13px;
                top: 0;
                width: 27px;
                height: 27px;
                background: no-repeat center;
                background-size: contain;
                &.top1{
                    background-image: url('../../../assets/top1.png');
                }
                &.top2{
                    background-image: url('../../../assets/top2.png');
                }
                &.top3{
                    background-image: url('../../../assets/top3.png');
                }
                &.top4{
                    background-image: url('../../../assets/top4.png');
                }
                &.top5{
                    background-image: url('../../../assets/top5.png');
                }
                &.top6{
                    background-image: url('../../../assets/top6.png');
                }
            }

            .game-rank-like{
                display: inline-block;
                position: absolute;
                right: 10px;
                top: 8px;
                width: 25px;
                height: 25px;
                background: url('../../../assets/like.png') no-repeat center;
                background-size: contain;
                &.liked{
                    background-image: url('../../../assets/liked.png');
                }
            }
            .game-rank-title{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                background-color: rgba(0,0,0,0.8);
                font-size: 12px;
                height: 25px;
                line-height: 25px;
                padding-left: 10px;
                font-weight: bold;
                padding-right: 10px;
                .tag{
                    float: right;
                }
            }
        }

        .game-rank-desc{
            color: #b3b3b3;
            font-size: 10px;
        }
    }
}
</style>
